<template>
	<!--<el-button type="text" @click="show = true">点击打开 Dialog</el-button>-->
	<el-dialog
	  title="新增角色"
	  :visible.sync="show"
	  width="30%"
	  :before-close="handleClose">
	  <el-form :model="jueseInfo" :rules="rules" ref="jueseInfo">
	  		<table>
	  			<tr>
	  				<td>角色名称</td>
	  				<td>
	  					<el-form-item prop="roleName">
	  						<el-input v-model="jueseInfo.roleName"></el-input>
	  					</el-form-item> 
	  				</td>
	  			</tr>
	  			<tr>
	  				<td>角色描述</td>
	  				<td>
	  					<el-form-item prop="roleDesc">
	  						<el-input v-model="jueseInfo.roleDesc"></el-input>
	  					</el-form-item> 
	  				</td>
	  			</tr>
	  			<tr>
	  				<td colspan="2">
	  					<el-tree
						 :data="allRole"
                        show-checkbox
                        node-key="permissionDesc"
                        ref="tree"
                        :props="props">
						</el-tree>
	  				</td>
	  			</tr>
	  		</table>
	    <el-button @click="handleClose">取 消</el-button>
	    <el-button type="primary" @click="addnewjuese">确 定</el-button>
	  </span>
	  <!--{{allRole}}-->
	</el-form>
	</el-dialog>
</template>
<script>
  export default {
  	props:["show"],
    data() {
      return {
      	props: {
          label: 'permissionDesc',
          children: 'children'
       },
       jueseInfo:{roleName:'',roleDesc:'',permissions:[]},
       rules:{
       	roleName:[
       		{required:true,message:"请输入角色名称",trigger:"blur"},
       		{min:3,message:'至少输入三个字符',trigger:'blur'}
       	],
       	roleDesc:[
       		{
       			required:true,message:"请输入角色描述",trigger:"blur"
       		},
       		{
       			min:3,max:20,message:'输入3到20字符',trigger:'blur'
       		}
       	]
       }
      }
    },
    computed:{
    	allRole(){
    		var arr=[];
    		var obj2=this.$store.getters.allPermission;
    		for(var key in obj2){
    			arr.push(obj2[key])
    		}
//  	console.log(arr);
    	return arr
    	}
    },
    mounted(){
		this.$store.dispatch("loadallpermissions")
 		},
    methods: {
      handleClose() {
        this.$parent.show = false;
      },
      addnewjuese(){
      	var permission=[];
      	this.$refs.tree.getCheckedNodes().forEach((item)=>{
      		permission.push(item._id)
      	});
      	this.jueseInfo.permissions=permission;
      	this.$refs['jueseInfo'].validate((valid)=>{
      		if(valid){
      			this.$http.post(this.$api.addnewjuese,this.jueseInfo).
      			then((res)=>{
      				this.$message({
      					message:res.message,
      					type:res.success?'success':"danger"
      				});
      				this.handleClose();
      				this.$store.dispatch("loadallroles",{api:this.$api.addnewjuese})

      			})
      		}else{
      			console.log("还有验证未完成");
      			return false;
      		}
      	})
      }
    }
  }
</script>
<style lang="scss">
	#addnewjuese{
		
	}
</style>